<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色单位</title>
    <style>

        body{
            background-color: silver;
        }
        .box1{
            width: 200px;
            height: 200px;
            /* 
                颜色单位
                    1.颜色名
                        red yellow orange blue green ...
                    2.rgb值
                        语法：rgb(红色, 绿色, 蓝色)
                            颜色的浓度需要一个0-255之间的值
                                            0%-100%
                        十六进制rgb
                            十进制 0 1 2 3 4 5 6 7 8 9 10
                            二进制 0 1 10 11 100 101 110 111
                            八进制 0 1 2 3 4 5 6 7 10 
                            十六进制 0 1 2 3 4 5 6 7 8 9 a b c d e f
                                    10 11 12 13 14 15 16 17 18 19 1a 1b 1c 1d 1e 1f
                                    20 ....

                            使用十六进制来表示颜色
                            语法：#红色绿色蓝色
                            - 取值范围 00-ff
                            - 如果颜色是两两重复的则可以对颜色进行简写
                                #aabbcc 简写为 #abc
                                #bbffaa 简写为 #bfa

                    3.rgba值
                        rgba和rgb基本一样，不同点在于增加了alpha值
                        - 语法：
                            rgba(红色, 绿色, 蓝色, 不透明度)
                            不透明度 需要一个 0-1之间的值
                                1 表示 100%不透明
                                0 表示 100%透明

                        - 十六进制rgba （IE不支持）
                            #红色绿色蓝色不透明度
                                不透明度的取值范围
                                     ff 表示 100%不透明
                                     00 表示 100%透明

                    4.HSL和HSLA
                        语法：HSL(色相, 饱和度, 亮度)
                            色相：取值范围0-360
                            饱和度：取值范围0%-100%
                            亮度：取值范围0%-100%
                        语法：HSLA(色相, 饱和度, 亮度, 不透明度)
                            不透明度 需要一个 0-1之间的值
                                1 表示 100%不透明
                                0 表示 100%透明
            */
            /* background-color: rgb(255,0,0); */
            /* background-color: rgb(100,50,120); */
            /* background-color: rgb(0,0,0); */
            /* background-color: rgb(0, 145, 226); */
            /* background-color: rgb(100%, 0%, 0%); */
            /* background-color: #00ff00; */
            /* background-color: #bfa; */
            /* background-color: rgba(255, 255, 0, .5); */
            /* background-color: #bbffaa88; */
            /* background-color: rgba(173, 211, 35, 0.644); */
            /* background-color: hsl(0, 100%, 20%); */
            background-color: hsla(0, 100%, 20%, 0.527);

        }
    </style>
</head>
<body>

    <div class="box1"></div>
    
</body>
</html>